<template>
  <div class="calendar">
    <el-row>
      <el-col :push="15">
        <el-select v-model="year" size="mini" placeholder="请选择年" @change="changeDate">
          <el-option v-for="item in yearList" :key="item" :label="item" :value="item" />
        </el-select>
        <el-select v-model="month" size="mini" placeholder="请选择月" @change="changeDate">
          <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
        </el-select>
      </el-col>
    </el-row>
    <el-calendar v-model="currentDate">
      <template slot="dateCell" slot-scope="{ date }">
        <div class="date-content">
          <span>{{ date.getDate() }}</span>
          <span v-if="isWeek(date)" class="rest">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: 'Calendar',
  data() {
    return {
      currentDate: new Date(),
      year: '',
      yearList: [],
      month: []
    }
  },
  created() {
    this.getNowDate()
  },
  methods: {
    getNowDate() {
      const now = new Date()
      const year = now.getFullYear()
      this.year = year
      this.month = now.getMonth() + 1
      for (let i = year - 5; i <= year + 5; i++) {
        // 加到数组里
        this.yearList.push(i)
      }
    },
    changeDate() {
      this.currentDate = new Date(`${this.year}-${this.month}-1`)
    },
    isWeek(date) {
      const day = date.getDay()
      return day == 6 || day == 0
    }
  }
}
</script>

<style lang="scss" scoped>
.calendar {
  .el-select {
    width: 19%;
    &:last-child {
      margin-left: 8px;
    }
  }
  .el-calendar {
    ::v-deep .el-calendar__header {
      display: none;
      font-size: 14px;
    }
    ::v-deep .el-calendar-table__row td,
    .el-calendar-table tr td:first-child,
    .el-calendar-table__row td.prev {
      border: none;
      text-align: center;
    }
    ::v-deep .el-calendar-day {
      line-height: 2.6vh;
      height: 4vh;
      position: relative;
      .rest {
        position: absolute;
        left: 42px;
        top: -2px;
        color: #fff;
        border-radius: 50%;
        background: rgb(250, 124, 77);
        width: 20px;
        height: 20px;
        line-height: 20px;
        display: inline-block;
        font-size: 12px;
        margin-left: 10px;
      }
    }
    ::v-deep .el-calendar__body {
      padding: 0;
      font-size: 14px;
      .el-calendar-table__row {
        .current {
          &.is-selected,
          .is-today {
            background: #fff;
            .date-content {
              position: relative;
              margin: 0 auto;
              background: #409eff;
              color: #fff;
              border-radius: 50%;
              width: 26px;
              height: 26px;
              .rest {
                position: absolute;
                left: 12px;
                top: -10px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
